<template>
  <page
    :nav="false"
    ref="pageRef"
    :light="true"
    :back="false"
    nav-color="transparent"
  >
    <view
      class="pagae-nav"
      :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
    >
      <view class="flex-column-align-center nav-title">我的</view>
    </view>
    <view
      class="centerWrapper"
      :style="{ backgroundImage: 'url(' + ossurl.box.boxPageBg + ')' }"
    >
      <view
        class="userBox"
        v-if="user"
        @click="gotoRouteNav('/subPackages/pages/user_info/index')"
      >
        <view class="avatarBox">
          <view class="avatarView">
            <image class="avatar" :src="user.avatar" />
            <image class="avatarEdit" :src="ossurl.mine.editIcon" />
          </view>
        </view>
        <view class="userInfo">
          <view class="nickname">{{ user.nickname || '' }}</view>
          <view class="idinfo">
            <view class="username" @click.native.stop="copy(user.username)">
              <image class="userInfoIcon" :src="ossurl.mine.id" />
              {{ user.username }}
              <view class="copyBtn">复制</view>
            </view>
            <div v-if="user.mobile" class="phone">
              <image class="userInfoIcon" :src="ossurl.mine.phone" />
              {{ user.mobile }}
            </div>
          </view>
        </view>
      </view>

      <view class="userBox" v-else @click="$router.push('login')">
        <view class="avatarBox">
          <view class="avatarView">
            <image class="avatar" :src="ossurl.common.noavatar" />
          </view>
        </view>
        <view class="userInfo">
          <view class="nickname">暂未登录！</view>
          <view class="info">点此登录账号</view>
        </view>
      </view>

      <view class="mineWrapper">
        <view class="stoneBox">
          <view
            class="stoneList"
            :style="{ backgroundImage: 'url(' + ossurl.mine.mineBg1 + ')' }"
          >
            <view
              class="stoneItem"
              :style="rockShow ? 'width:33%;' : 'width:40%;'"
              @click="gotoRoute('coupon')"
              v-if="user"
            >
              <image class="stoneIcon" :src="ossurl.mine.couponIcon" />
              优惠券
              <span class="stoneNum">{{ showNumber('couponCount') }}</span>
            </view>
            <view
              class="stoneItem"
              :style="rockShow ? 'width:33%;' : 'width:40%;'"
              @click="gotoRoute('store')"
              v-if="user"
            >
              <image class="stoneIcon" :src="ossurl.mine.warehouseIcon" />
              仓库
              <span class="stoneNum">{{ showNumber('inventoryCount') }}</span>
            </view>
            <view
              class="stoneItem"
              @click="gotoRoute('magic')"
              style="width: 33%"
              v-if="user && rockShow"
            >
              <image class="stoneIcon" :src="ossurl.mine.stoneIcon" />
              源石
              <span class="stoneNum">{{ showNumber('magicBalance') }}</span>
            </view>
          </view>
          <view class="flex flexList">
            <view
              class="flex-sub flexItem"
              @click="gotoRoute('pull_new_user')"
              v-if="inviteShow"
            >
              <image class="flexIcon" :src="ossurl.mine.invite" />
              <view class="title">邀新有礼</view>
            </view>
            <view class="flex-sub flexItem" @click="gotoWeb()">
              <image class="flexIcon" :src="ossurl.mine.gift" />
              <view class="title">进群领福利</view>
            </view>
            <view class="flex-sub flexItem" @click="gotoRoute('message')">
              <image class="flexIcon" :src="ossurl.mine.message" />
              <view class="title">系统消息</view>
            </view>
            <view class="flex-sub flexItem" @click="gotoRoute('order_award')">
              <image class="flexIcon" :src="ossurl.mine.order" />
              <view class="title">宝箱订单</view>
            </view>
          </view>
        </view>

        <view
          class="shoppingBox"
          :style="{ backgroundImage: 'url(' + ossurl.welfare.roomBg + ')' }"
        >
          <view class="title">
            商城订单
            <view class="more" @click="gotoOrder(0)">
              全部
              <view class="cuIcon-right"></view>
            </view>
          </view>
          <view class="shopList">
            <view class="item" @click="gotoOrder(1)">
              <image class="shopImage" :src="ossurl.mine.order1" />
            </view>
            <view class="item" @click="gotoOrder(4)">
              <image class="shopImage" :src="ossurl.mine.order2" />
            </view>
          </view>
        </view>

        <cell @show-vip="showVip" />
        <view class="margin14 radius6 overflow-hidden">
          <official-account></official-account>
        </view>
        <vip ref="vipRef" />
        <poster ref="posterRef" />
      </view>
    </view>
  </page>
</template>

<script>
import fun from './fun.vue';
import cell from './cell.vue';
import vip from './vip.vue';
import poster from './poster';
import ossurl from '@/utils/ossurl';
export default {
  components: { fun, vip, poster, cell },
  data() {
    return {
      ossurl,
      active: 0,
      avatar_show: false,
      scrollTop: 0,
      indexData: null,
      inviteShow: false,
    };
  },
  computed: {
    user() {
      return this.$store.state.userInfo;
    },
    hide() {
      return !this.$store.state.hide;
    },
    headerBg() {
      return this.scrollTop > 0 ? '#fff' : 'transparent';
    },
    statusBarHeight() {
      if (this.$store.state.systemInfo) {
        return this.$store.state.systemInfo.statusBarHeight;
      }
      return 20;
    },
    rockShow() {
      let val = false;
      val = uni.getStorageSync('rockShow');
      return val;
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onTabItemTap() {},
  onShow() {
    this.getParamConfig();
    this.avatar_show = this.isTimePast('2023-07-21 23:59:59');
    this.$service.base.track();
    this.getIndex();
  },
  methods: {
    async getParamConfig() {
      const res = await this.$service.user.getParamConfig('invite_config');
      this.inviteShow = res.state != 0;
    },
    gotoRouteNav(route){
      uni.navigateTo({
            url: route
          });
    },
    async getIndex() {
      if (!this.$common.isLogin()) {
        this.indexData = null;
        return;
      }
      const res = await this.$service.award.magicIndex();
      this.indexData = res;
    },
    isTimePast(time) {
      const currentTime = new Date();
      // 解析时间字符串
      const [targetDate, targetTime] = time.split(' ');
      const [targetYear, targetMonth, targetDay] = targetDate.split('-');
      const [targetHour, targetMinute, targetSecond] = targetTime.split(':');
      // 创建目标日期时间对象
      const targetDateTime = new Date(
        targetYear,
        targetMonth - 1,
        targetDay,
        targetHour,
        targetMinute,
        targetSecond
      );

      return currentTime > targetDateTime;
    },
    change(e) {
      this.active = e.detail.current;
    },
    copy(text) {
      console.log(text);
      this.$common.copy(text);
    },
    getPhoneNumber(e) {
      if (!e.detail.encryptedData) return;
      this.bindMobile(e.detail);
    },
    async bindMobile(param) {
      const res = await this.$service.user.bindMobile(param);
      if (res) {
        this.$service.user.info();
      }
    },
    showVip() {
      this.$refs.vipRef.show();
    },
    showNext(item) {
      this.$common.showNext(item);
    },
    gotoRoute(route) {
      this.$router.pushCheck(route);
    },
    gotoOrder(active) {
      this.$router.pushCheck('order_product', { active });
    },
    gotoWeb() {
      const url =
        'https://mp.weixin.qq.com/s?__biz=MzkzMTU2ODM4MQ==&mid=2247483786&idx=1&sn=b8fb65d562c3778881101d0e194bd5aa&chksm=c2684e18f51fc70ea3140fa1145adabed0d7203928d0b36431e425f9360fd66d4ed173f60870#rd';
      this.$router.web(url, '领福利');
    },
    showNumber(key) {
      if (!this.indexData) return '-';
      if (typeof this.indexData[key] === 'undefined') return '-';
      const val = this.bigNumberTransform(this.indexData[key]);
      return val;
    },
    bigNumberTransform(value) {
      const newValue = ['', '', ''];
      let fr = 1000;
      let num = 3;
      let text1 = '';
      let fm = 1;
      while (value / fr >= 1) {
        fr *= 10;
        num += 1;
        // console.log('数字', value / fr, 'num:', num)
      }
      if (num <= 4) {
        // 千
        newValue[0] = parseInt(value / 1000) + '';
        newValue[1] = '千';
      } else if (num <= 8) {
        // 万
        text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万';
        // tslint:disable-next-line:no-shadowed-variable
        fm = text1 === '万' ? 10000 : 10000000;
        if (value % fm === 0) {
          newValue[0] = parseInt(value / fm) + '';
        } else {
          newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + '';
        }
        newValue[1] = text1;
      } else if (num <= 16) {
        // 亿
        text1 = (num - 8) / 3 > 1 ? '千亿' : '亿';
        text1 = (num - 8) / 4 > 1 ? '万亿' : text1;
        text1 = (num - 8) / 7 > 1 ? '千万亿' : text1;
        // tslint:disable-next-line:no-shadowed-variable
        fm = 1;
        if (text1 === '亿') {
          fm = 100000000;
        } else if (text1 === '千亿') {
          fm = 100000000000;
        } else if (text1 === '万亿') {
          fm = 1000000000000;
        } else if (text1 === '千万亿') {
          fm = 1000000000000000;
        }
        if (value % fm === 0) {
          newValue[0] = parseInt(value / fm) + '';
        } else {
          newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + '';
        }
        newValue[1] = text1;
      }
      if (value < 1000) {
        newValue[0] = value + '';
        newValue[1] = '';
      }
      return newValue.join('');
    },
  },
};
</script>

<style lang="scss"></style>
<style lang="scss" scoped>
.pagae-nav {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  transition: 0.2s;
}
.nav-title {
  height: 80rpx;
  font-size: 32rpx;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: bold;
  color: #000000;
}
.centerWrapper {
  padding-top: 200rpx;
  background-size: 100% auto;
  background-repeat: no-repeat;
  .userBox {
    display: flex;
    padding-bottom: 40rpx;
    .avatarBox {
      height: 160rpx;
      background-size: 100% 100%;
      padding: 0 20rpx;
      position: relative;
      .avatarView {
        position: relative;
        display: inline-block;
        .avatar {
          width: 148rpx;
          height: 148rpx;
          border-radius: 50%;

          border: 8rpx solid #ffe996;
        }
        .avatarEdit {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 48rpx;
          height: 48rpx;
        }
      }
      .centerEdit {
        width: 142rpx;
        height: 46rpx;
        position: absolute;
        right: 0;
        bottom: 20rpx;
      }
    }
    .userInfo {
      padding: 0 20rpx;
      padding-bottom: 32rpx;
      .nickname {
        font-size: 32rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        color: #000000;
        padding: 24rpx 0 10rpx 0;
        margin-bottom: 20rpx;
      }
      .idinfo {
        display: flex;
        .username,
        .phone {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 44rpx;
        }
      }
      .copyBtn {
        background: rgba(255, 255, 255, 0.33);
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        margin-left: 8rpx;
        color: #ac8906;
        font-size: 20rpx;
        padding: 4rpx 8rpx;
      }
      .info {
        font-size: 24rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 350;
        color: #997a03;
      }
      .userInfoIcon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
  }
}

.mineWrapper {
  padding: 0 20rpx;
  background-color: #f6f6f6;
  padding-top: 200rpx;
  position: relative;
  margin-top: 100rpx;
  .stoneBox {
    // margin-top: -40rpx;
    position: absolute;
    top: -100rpx;
    left: 20rpx;
    right: 20rpx;
    .flexIcon {
      width: 96rpx;
      height: 96rpx;
    }
    .stoneList {
      background-size: 100% 100%;
      height: 98rpx;
      padding: 0 16rpx;
      display: flex;
      justify-content: center;
      .stoneItem {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64rpx;
        font-size: 24rpx;

        font-family: Source Han Sans, Source Han Sans;
        font-weight: 350;
        color: #906700;
        .stoneIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
        .stoneNum {
          font-size: 36rpx;
          font-family: Rousseau Deco, Rousseau Deco;
          font-weight: bold;
          color: #000000;
          margin-left: 12rpx;
        }
      }
    }
  }
  .flexList {
    background-color: #fff;
    padding: 28rpx;
    border-radius: 0 0 30rpx 30rpx;
    .flexItem {
      text-align: center;
      flex: 1;
    }
  }
}
.shoppingBox {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 2rpx 28rpx 30rpx 28rpx;
  margin-top: 20rpx;
  background-size: 240rpx 150rpx;
  background-position: top right;
  background-repeat: no-repeat;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    font-family: Source Han Sans, Source Han Sans;
    color: #000000;
    padding: 24rpx 0;
    font-weight: bold;
    .more {
      font-size: 24rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 350;
      color: #d1c289;
      display: flex;
      align-items: center;
    }
  }
  .shopList {
    display: flex;
    .item {
      min-width: 338rpx;
      .shopImage {
        width: 332rpx;
        height: 154rpx;
      }
      &:last-child {
        margin-left: -16rpx;
      }
    }
  }
}
</style>
